import React, {JSX} from 'react';
import {View, StyleSheet, FlatList} from 'react-native';
import {Item as EpisodesItem} from '../../HistoryScreen/data';
import {Vertical} from '../../../kit/dramaProduct';
import { normalize } from '../../../utils/adapter';

type Props = {
  list: Array<EpisodesItem>;
};

export default function ({list}: Props): JSX.Element {
  return (
    <View style={styles.episodes_list_container}>
      <FlatList
        data={list}
        numColumns={3}
        renderItem={({item}) => {
          return <Vertical {...item} />;
        }}
        contentContainerStyle={styles.list}
        columnWrapperStyle={styles.column}
        keyExtractor={item => item.id as unknown as string}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  episodes_list_container: {
    flex: 1,
    marginTop:normalize(10),
    marginBottom:normalize(10),
  },
  list: {
    paddingHorizontal: 10, // 列表两侧的内边距
    gap:15,
  },
  column:{
    justifyContent:'space-between',
  },
});
